import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text } from "@tarojs/components-rn";
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, pageSize } from "../../utils/common";
import { toJS } from 'mobx';
import course_listStyleSheet from "./course_list_styles";
var _styleSheet = course_listStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let CourseList = class CourseList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allCategories: [],
      items: [],
      totalCount: 0,
      courseInformation: {},
      currentCateGoryId: 1,
      pageIndex: 1,
      pageSize
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '建企商学院' });
    this.getAllCategories();
    this.getAllCourseInformation();
  }
  changeNav(currentCateGoryId) {
    this.setState({
      currentCateGoryId
    }, () => {
      this.getAllCourseInformation();
    });
  }
  getAllCategories() {
    let businessSchool = this.props.stores.BusinessSchool;
    businessSchool.getAllCategories({
      callback: res => {
        // console.log(res)
        this.setState({
          allCategories: res.items
        });
      }
    });
  }
  getAllCourseInformation() {
    let businessSchool = this.props.stores.BusinessSchool;
    let { currentCateGoryId, pageIndex, pageSize } = this.state;
    businessSchool.getAllCourseInformation({
      cateGoryId: currentCateGoryId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({
            totalCount: toJS(res.totalCount),
            items: toJS(res.items)
          });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({
            totalCount: res.totalCount,
            items
          });
        }
      }
    });
  }
  onReachBottom() {
    let { totalCount, pageSize, pageIndex } = this.state;
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllCourseInformation();
      });
    }
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  render() {
    let { allCategories, currentCateGoryId, items } = this.state;
    return <View style={[_styleSheet["college-index"], _styleSheet["college-list"]]}>
       <View style={_styleSheet["column-type"]}>
         {allCategories.reverse().map(item => {
          return <Text key={item.id} onClick={this.changeNav.bind(this, item.id)} style={_getStyle(currentCateGoryId === item.id ? 'column column-active' : 'column')}>{item.cateGoryName}</Text>;
        })}
       </View>

       <View style={_styleSheet["interval"]} />
       {items && items.map(item => {
        return <View onClick={this.handelRouter.bind(this, '/pages/business_school/detail?id=' + item.id)} style={_styleSheet["list-08-item"]}>
               <Image src={item.courseLogoImg} style={_styleSheet["item-img"]} />
               <View style={_styleSheet["info"]}>
                 <View style={_styleSheet["title"]}>
                   {item.courseName}
                 </View>
                 <View style={_styleSheet["old-price"]}>￥{item.coursePrice}</View>
                 <View style={_styleSheet["price-wrap"]}>
                   <View style={_styleSheet["price"]}>VIP会员 ￥
                     <Text style={_styleSheet["big"]}>{item.vipCourserPrice}</Text>
                   </View>
                   <View style={_styleSheet["num"]}>{item.studyCount}人学过</View>
                 </View>
               </View>
             </View>;
      })}
       {items.length <= 0 ? <View style={_styleSheet["page-none-info"]}>暂时没有相关课程信息~</View> : ''}
     </View>;
  }
};
CourseList = tslib_1.__decorate([inject("stores"), observer], CourseList);
export default CourseList;